<template>
  <view class="page">
    <global-contact></global-contact>
    <view class="headers">
      <view class="tab" :style="{ height: navHeight + 'px', 'padding-top': statusHeight + 'px' }">
        <image></image>
        <text>我的</text>
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view class="header" :style="{ paddingTop: navHeight ? navHeight + statusHeight + 'px' : '300px' }">
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="header header-top-h5">
        <!-- #endif -->
        <view class="left">
          <!-- 点击进入个人中心 -->
          <view class="" style="display: flex;justify-content: flex-start;align-items: center;" @click="handleChange" v-if="userInfo">
            <image :src="showImg + avatarUrl"></image>
            <view class="user">
              <text>{{ userInfo.username }}</text>
              <!-- <text class="phone">{{phoneNumber}}</text> -->
            </view>
          </view>
          <view class="login flex" v-if="userInfo == null">
            <view class="img-login"></view>
            <u-button @click="Login" type="primary" text="立即登录"></u-button>
          </view>
        </view>
        <view class="right" @click="handleNav" v-if="userInfo&&!userInfo.user_join">
          <image src="https://www.atuanjian.com/appletStatic/static/images/my/my-13.png" mode=""
            style="margin-right: 12rpx;"></image>
          <block v-if="!userInfo.user_join">
            去认证
            <image src="https://www.atuanjian.com/appletStatic/static/images/icon-right.png" mode="aspectFit"></image>
          </block>
        </view>
      </view>
      <view class="list">
        <view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
          <view class="left">
            <image :src="item.img" mode="aspectFit"></image>
          </view>
          <view class="right" :style="{ 'borderBottom': list.length - 1 == index ? 'none' : '1rpx solid #D7D7D7' }">
            <text>{{ item.name }}</text>
            <image src="https://www.atuanjian.com/appletStatic/static/mine/i11.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>

      <!-- #ifdef H5 -->
      <!-- 	<view class="list">
				<view class="item" @click="handleRegister()">
					<view class="left">
						<image src="https://www.atuanjian.com/appletStatic/static/mine/register.png" mode="aspectFit"></image>
						<text>立即注册</text> 
					</view>
					<view class="right">
						<image src="https://www.atuanjian.com/appletStatic/static/mine/i11.png" mode="aspectFit"></image>
					</view>
				</view>
			</view> -->
      <!-- #endif -->

      <view class="list" @click="logout" style="margin-top: 20rpx;" v-if="userInfo">
        <view class="item">
          <view class="left">
            <image src="https://www.atuanjian.com/appletStatic/static/images/my/my-12.svg" mode="aspectFit"></image>
          </view>
          <view class="right" style="border: none;">
            <text>退出登录</text>
          </view>
        </view>

      </view>
      <u-modal :show="showModel" cancelText="取消" cancelColor="#999999" :closeOnClickOverlay="true"
        :showCancelButton="true" confirmText="退出" confirmColor="#FFB850" title="您真的要退出吗？" :zoom="true"
        @close="closeModal" @confirm="confirm" @cancel="cancel"></u-modal>
      <!-- #ifdef MP-WEIXIN -->
      <!-- <van-overlay :show="showTel">
		 	<view class="wrapper">
		 		<view class="title"><text>WELCOME</text></view>
		 		<view class="note"><text>欢迎来到蚂蚁团建小程序123</text></view>
		 		<view class="get">为了提供更好的服务，蚂蚁团建小程序需要获取您的以下信息</view>
		 		<view class="tel">您的手机号码</view>
		 		<view class="btn">
		 			<button open-type="getPhoneNumber" @getphonenumber="getPhone">确认授权</button>
		 		</view>
		 	</view>
		 </van-overlay> -->
      <!-- #endif -->

      <tabBar current='4' :callPhone="callPhone"></tabBar>
      <!-- <elLogin :onOff="onOff" :onRegister="onRegister" @closeLogin='handleCloseLogin($event)' @closeRegister='handleCloseRegister($event)'></elLogin> -->
    </view>
</template>

<script>
import tabBar from "@/components/tabBar.vue";
import elLogin from "@/components/hint.vue";
import { statusHeight, navHeight } from "@/utils/common.js";
import { wxLogin, getPhoneNumber } from "@/utils/request.js";
export default {
  data() {
    return {
      showImg: this.$config.showImgApi,
      onOff: false,
      showModel: false,
      statusHeight: uni.getSystemInfoSync().statusBarHeight,
      navHeight: 0,
      isLog: false, // 登录
      showTel: false, // 手机号
      phoneNumber: null,
      userInfo: null,
      callPhone: true,
      list: [
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/my/my-1.svg",
          name: "创建需求",
          url: "/pagesA/need/need?id=6",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/my/my-2.svg",
          name: "用户反馈",
          url: "/pages/mine/feed",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/my/my-3.svg",
          name: "我的需求",
          url: "/pagesA/need/mine",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/my/my-4.svg",
          name: "我的礼券",
          url: "",
        },
        // {
        //   img: "https://www.atuanjian.com/appletStatic/static/images/wallet/icon-03.svg",
        //   name: "我的钱包",
        //   url: "/pagesB/my/wallet",
        // },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/my/my-5.svg",
          name: "我的收藏",
          url: "/pages/mine/collect",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/my/my-6.svg",
          name: "我的分享",
          url: "/pages/mine/shares",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/my/my-7.svg",
          name: "内部方案",
          url: "/pages/mine/inset",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/my/my-8.svg",
          name: "我的发布",
          url: "/pagesB/release/activeList",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/wallet/icon-02.svg",
          name: "我的方案",
          url: "/pagesB/my/programme",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/wallet/icon-22.svg",
          name: "我的订单",
          url: "/pagesB/order/index",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/wallet/icon-22.svg",
          name: "我的活动",
          url: "/pagesB/active/myActive",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/my/my-9.svg",
          name: "我的设置",
          url: "/pages/mine/setting",
        },
        {
          img: "https://www.atuanjian.com/appletStatic/static/images/my/my-10.svg",
          name: "关于我们",
          url: "/pages/mine/about?id=37",
        },
      ],
      onRegister: false,
    };
  },
  components: { tabBar, elLogin },
  computed: {
    avatarUrl() {
      if (this.userInfo && this.userInfo.avatar_url) {
        return this.userInfo.avatar_url;
      } else {
        return "https://www.atuanjian.com/appletStatic/static/mine/head.png";
      }
    },
  },
  methods: {
    handleCloseLogin($event) {
      this.onOff = false;
      let userInfo = uni.getStorageSync("userInfo");
      if (userInfo) {
        this.userInfo = userInfo;
        return;
      }
    },

    handleCloseRegister(event) {
      this.onRegister = false;
    },
    handleRegister() {
      this.onRegister = true;
    },
    openLog() {
      this.onOff = true;
    },
    // toLogin(){
    // 	// this.Login()
    // },
    // handleChange(){
    //   uni.navigateTo({
    //     url: '/pages/mine/wxLogin'
    //   })
    // },
    Login() {
      console.log('Login:')
      // #ifdef MP-WEIXIN
      if (this.isLog) {
        return;
      }
      this.isLog = false;
      uni.navigateTo({
        url: "/pagesB/login/login",
      });
      return false;
      // #endif
      // #ifdef H5
      let userInfo = uni.getStorageSync("userInfo");
      if (userInfo) {
        this.userInfo = userInfo;
        return;
      }
      this.onOff = true;
      // #endif
    },
    async wxLogin(data) {
      return await wxLogin(data);
    },
    getPhone(e) {
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        uni.login({
          success: (res) => {
            let data = {
              token: this.userInfo.token,
              code: res.code,
              encryptedData: e.detail.encryptedData,
              iv: e.detail.iv,
            };
            this.getPhoneNumber(data)
              .then((res) => {
                // if (res.code == 200) {
                this.phoneNumber = res.phone;
                uni.setStorageSync("phone", res.phone);
                this.showTel = false;
                // }
              })
              .catch((err) => {
                // console.log(err)
              });
          },
        });
      }
      // console.log('获取手机号',e)
    },
    async getPhoneNumber(data) {
      return await getPhoneNumber(data);
    },
    handleChange() {
      // uni.navigateTo({url:'/pagesB/login/info'})
    },
    handleNav() {
      if (!uni.getStorageSync('userInfo')) {
        uni.showToast({
          title: '请先登陆！',
          icon: "none"
        })
        return;
      }
      if (!this.userInfo.user_join) {
        uni.navigateTo({
          url: "/pagesB/join/join",
        });
      }
    },
    detail(item) {
      if (item.url) {
        if (!this.userInfo) {
          uni.showToast({
            title: "请登录",
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pagesB/login/login",
            });
          }, 1500);
          return;
        }
        uni.navigateTo({
          url: item.url,
        });
      } else {
        uni.showToast({
          title: "敬请期待",
          icon: "none",
          duration: 2000,
        });
      }
    },
    logout() {
      this.showModel = true;
    },
    closeModal() {
      this.showModel = false;
    },
    confirm() {
      uni.clearStorageSync();
      (this.isLog = false), // 登录
        (this.phoneNumber = null),
        (this.userInfo = null),
        (this.showModel = false);
    },
    cancel() {
      this.showModel = false;
    },
    // 跳转个人信息
    myInfo() {
      uni.navigateTo({
        url: "/pages/mine/wxLogin?edit=true",
      });
      // uni.navigateTo({
      // 	url: `/pagesA/personalData/personalData`
      // })
    },
  },
  onShow() {
    // uni.$on('toLogin')
    let t = this;
    if (!uni.getStorageSync("userInfo")) {
      uni.showModal({
        title: "提示",
        content: "您未登录，是否登录",
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if (confirm) {
            uni.navigateTo({
              url: "/pagesB/login/login",
            });
          }
        },
      });
    }
    uni.$on("closeLogin", function (data) {
      console.log("data", data);
      if (data) {
        let user = uni.getStorageSync("userInfo");
        t.userInfo = JSON.parse(user);
        t.phoneNumber = uni.getStorageSync("phone");
        this.isLog = true;
      }
      t.$data.onOff = false;
    });
    uni.$on("closeRegister", function (data) {
      t.onRegister = false;
    });
    let user = uni.getStorageSync("userInfo");
    // console.log(user)
    if (user) {
      t.userInfo = JSON.parse(user);
      t.phoneNumber = uni.getStorageSync("phone");
      this.isLog = true;
      this.onOff = false;
    } else {
      t.userInfo = null;
      t.phoneNumber = "";
      this.isLog = false;
    }
  },
  onHide() {
    // uni.$off('toLogin')
    uni.$off("closeLogin");
  },
  onLoad() {
    this.statusHeight = statusHeight;
    this.navHeight = navHeight;
    let user = uni.getStorageSync("userInfo");
    if (user) {
      this.userInfo = JSON.parse(user);
      this.phoneNumber = uni.getStorageSync("phone");
    } else {
      this.onOff = true;
    }
  },
  onShareAppMessage() { },
};
</script>

<style lang="scss" scoped>
.page {
  background-image: linear-gradient(to bottom, #ffb850, #f2f2f2, #ffffff);
}

.headers {
  width: 750rpx;
  position: fixed;
  left: 0;
  z-index: 99;
  // background-color: #ffb850;

  .tab {
    padding-left: 30rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-right: 250rpx;
    }

    text {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }
}

.img-login {
  width: 120rpx;
  height: 120rpx;
  margin-right: 28rpx;
  border-radius: 50%;
  background-color: #ffffff;
}

.header {
  padding: 60rpx 30rpx 60rpx 60rpx;
  @include flex_style(space-between, center, row nowrap);

  .left {
    @include flex_style(flex-start, center, row nowrap);

    image {
      width: 120rpx;
      height: 120rpx;
      margin-right: 28rpx;
      border-radius: 50%;
    }

    .user {
      max-width: 400rpx;
      @include flex_style(flex-start, flex-start, column nowrap);

      text {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 40rpx;
        color: #333333;
      }

      .phone {
        margin-top: 20rpx;
        font-size: 24rpx;
      }
    }
  }

  .right {
    display: flex;
    align-items: center;

    image {
      width: 36rpx;
      height: 36rpx;
    }
  }
}

.list {
  margin-top: 24rpx;
  width: 693rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
  margin: 0 auto;
  overflow: hidden;

  .item {
    padding: 24rpx 30rpx 0rpx 56rpx;
    @include flex_style(flex-start, center, row nowrap);

    .left {
      padding-bottom: 24rpx;
      margin-right: 12rpx;
      @include flex_style(flex-start, center, row nowrap);

      image {
        width: 35rpx;
        height: 35rpx;
      }

      text {
        font-size: 28rpx;
        font-family: 苹方-简;
        font-weight: normal;
        line-height: 38rpx;
        color: #333333;
      }
    }

    .right {
      padding-bottom: 24rpx;
      flex: 1;
      border-bottom: 1px solid #d7d7d7;
      @include flex_style(space-between, center, row nowrap);

      image {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
}

.logout {
  margin-bottom: 40rpx;
  background-color: #ffffff;
  padding: 24rpx 30rpx 24rpx 56rpx;
  border-bottom: 1px solid #f5f5f5;
  margin-top: 20rpx;
  @include flex_style(space-between, center, row nowrap);

  .left {
    @include flex_style(flex-start, center, row nowrap);

    image {
      width: 56rpx;
      height: 56rpx;
      margin-right: 12rpx;
    }

    text {
      font-size: 28rpx;
      font-family: 苹方-简;
      font-weight: normal;
      line-height: 38rpx;
      color: #333333;
    }
  }
}

.login {
  display: flex;
  justify-content: flex-start;align-items: center;
  ::v-deep.u-button--primary {
    background-color: transparent !important;
    border-width: 0 !important;
  }
  ::v-deep.u-button{
    width: auto;
  }
  ::v-deep.u-button__text {
    color: #333333;
  }
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 670rpx;
  height: 560rpx;
  background-color: #ffffff;
  border-radius: 28rpx;
  padding-top: 50rpx;
  padding-bottom: 30rpx;

  .title {
    text-align: center;
    font-size: 50rpx;
    margin-bottom: 38rpx;
  }

  .note {
    text-align: center;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 24rpx;
    margin-bottom: 58rpx;
  }

  .get {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 48rpx;
    padding: 0 43rpx 0 50rpx;
    margin-bottom: 60rpx;
  }

  .tel {
    padding-left: 50rpx;
    margin-bottom: 66rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
    line-height: 48rpx;
  }

  .btn {
    text-align: center;
  }
}
</style>
